/**
 * Created by 游永年 on 2019-01-23 15:42.
 * 预约第一步,预约详情
 */
'use strict'
import React, {Component} from 'react';
import {connect} from 'dva';
import Product from "../../../components/Product/Product";
import Full from "../../../components/layout/Full";
import PickerItem from "../../../components/items/PickerItem/PickerItem";
import {district} from 'antd-mobile-demo-data';
import {createForm, createFormField} from "rc-form";
import style from './MySteps.less';
import {Button} from "antd-mobile";

class BookOne extends Component {
  render() {
    const {getFieldProps, getFieldsValue} = this.props.form;
    const {yyxqSelect = {}} = this.props;
    const {gmkc = 0, mksc = 0} = getFieldsValue(['gmkc', 'mksc']);
    const time = gmkc * mksc || 0;
    const totalMoney = time * 100 || 0;

    return (<Full>
      <Product classInfShow={false} priceShow={false}/>
      <PickerItem {...getFieldProps('smjk')} data={district}>上门教课</PickerItem>
      <PickerItem {...getFieldProps('gmkc')} data={yyxqSelect.gmkc || []} cols={1}>购买课次</PickerItem>
      <PickerItem {...getFieldProps('mksc')} data={yyxqSelect.mksc || []} cols={1}>每次课时长</PickerItem>
      <div className={style.total}>
        <div>共计{time}小时</div>
        <div>总额：{totalMoney}元</div>
      </div>
      <Button type={'primary'} onClick={this.onClick}>选择上课时间</Button>
    </Full>);
  }

  onClick = _ => this.props.dispatch({type: 'product/next'});
};

BookOne.propTypes = {};

const opts = ({product}) => {
  const {isBook = false, yyxqSelect, yyxq} = product || {};

  return {
    isBook,
    yyxqSelect,
    yyxq,
  };
};

const onFieldsChange = (props, fields) => {
  const {dispatch} = props;
  let {yyxq = {}} = props;
  yyxq = {...yyxq, ...fields};
  dispatch({type: 'book/yyxq', payload: yyxq});
};

export const mapPropsToFields = (props) => {  //  用于更新页面数据，否则重新赋值刷新不了页面
  const {yyxq = {}} = props;
  const obj = {};
  const fields = ['smjk', 'gmkc', 'mksc'];
  fields.forEach(field => {
    const fieldValue = Reflect.get(yyxq, field);
    Reflect.set(obj, field, createFormField(fieldValue));
  });
  return obj;
};

export default connect(opts)(createForm({mapPropsToFields, onFieldsChange})(BookOne));
